<template>
	<div class="messageTips">
		<p class="head">
			<span class="head-left"
				><img class="info" src="../../../static/images/info.png" /><span class="text">{{ messageTipsModel.title }}</span></span
			>
			<span @click="cancel" class="head-right"
				><div style="margin-top:4px"><img src="../../../static/images/close.png"/></div
			></span>
		</p>
		<p class="content">{{ messageTipsModel.content }}</p>
		<p class="lower">
			<Button type="primary" @click="sumbit">{{ messageTipsModel.btnText }}</Button>
		</p>
	</div>
</template>
<script>
export default {
	props: {
		messageTipsModel: {
			type: Object,
			required: true,
			default: () => {}
		}
	},
	data() {
		return {};
	},
	created() {},
	mounted() {},
	methods: {
		cancel() {
			this.$emit('cancel');
		},
		sumbit() {
			this.$emit('sumbit');
		}
	}
};
</script>
<style scoped>
.messageTips {
	width: 472px;
	position: absolute;
	z-index: 1000;
	top: 30%;
	left: 20%;
	padding: 10px 20px;
	background: #ffffff;
	box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.14);
	border-radius: 4px;
}
.messageTips .lower {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}
.messageTips .content {
	margin-top: 10px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 21px;
	display: flex;
}
.messageTips .head {
	display: flex;
	justify-content: space-between;
}
.messageTips .head .text {
	margin-left: 14px;
	font-size: 15px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 24px;
}
.messageTips .head .head-left .info {
	position: absolute;
	left: 2%;
	top: 10%;
}
</style>
